<template>
	<view style="min-height: 100vh;">
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header_slot flex justify-start align-center" @click="closePage()">
					<view class="action" style="margin-right: 20rpx;">
						<text class="cuIcon-back "></text>
					</view>
					<view class="content text-bold">
						我的圈子
					</view>
				</view>
			</template>
		</headerSlot>
		<view class="scroll_view">
			<scroll-view scroll-x class="bg-white nav" style="padding: 24rpx 0;">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
						v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
						{{item.title}}
						<text class="act_line" v-if="index==TabCur"></text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="margin-top: 140rpx;padding: 32rpx 0;">
			<circleCardList :circleList="circleList" :tabType='tabType' :userInfo="userInfo" />
		</view>
	</view>

</template>

<script>
	import headerSlot from '@/components/header-slot.vue';
	import circleCardList from '@/components/circle-card-list.vue';
	import config from '@/config/config';
	import storage from "@/utils/storage.js";
	import {
		postsMyList
	} from '@/api/mine.js'
	export default {
		components: {
			headerSlot,
			circleCardList
		},
		data() {
			return {
				config,
				TabCur: 0,
				scrollLeft: 0,
				userInfo: {},
				circleList: [],
				type: 1,
				tabType: {
					id: 0,
					title: '全部',
				},
				tabList: [{
						id: 0,
						title: '全部',
					}, {
						id: 1,
						title: '邻里日常',
					}, {
						id: 3,
						title: '邻里闲置',
					},
					{
						id: 2,
						title: '失物招领',
					}
				],
				pages: {
					page: 1,
					limit: 10
				},
				total: 0,
			};
		},
		onLoad() {
			this.userInfo = storage.getUserInfo()
			this.initMyCircle()
		},
		onPullDownRefresh() {
			this.circleList = []
			this.pages = {
				page: 1,
				limit: 10
			}
			this.initMyCircle()
		},
		onReachBottom() {
			if (this.circleList.length < this.total && this.circleList.length > 0) {
				this.pages.page++
				this.initMyCircle()
			}
		},
		methods: {
			initMyCircle() {
				uni.showLoading({
					mask: true,
					title: "加载中..."
				})
				postsMyList(this.pages).then(res => {
					if (this.circleList.length > 0) {
						this.circleList = [...this.circleList, ...res.data.data.list]
					} else {
						this.circleList = res.data.data.list
					}
					uni.hideLoading()
					uni.stopPullDownRefresh()
					this.total = res.data.data.pagination.total
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.type = this.tabList[this.TabCur].id
				this.tabType = this.tabList[this.TabCur]
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				if (this.tabType.title !== "全部") {
					this.pages.type = this.tabType.title
				} else {
					delete this.pages.type
				}
				this.circleList = []
				this.initMyCircle()
			},
			closePage() {
				uni.navigateBack()
			},
			editCircle() {
				this.$router.smartNavigate({
					url: '/pages/circlePages/editCircle'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header_slot {
		padding: 0 32rpx;
		width: 100%;
	}

	.circle_list {
		margin-top: 160rpx !important;
	}

	movable-area {
		min-height: 100vh;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}

	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		font-size: 30px !important;
		background-color: #e54d42;
		color: #ffffff;
		padding: 0 30rpx;

	}

	.fixed {
		position: fixed;
		z-index: 20;
	}

	.release {
		height: 50px !important;
		width: 50px !important;
		border-radius: 50%;
		font-size: 30px !important;
		padding: 0 32rpx;
		width: 100%;
		font-weight: 500;
		font-size: 36rpx;
		color: #fff;
	}

	.index_top_image {
		width: 176rpx;
		height: 48rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.scroll_view {
		position: fixed;
		width: 100%;
		z-index: 10;

		.flex-sub {
			font-weight: 400;
			font-size: 32rpx;
			color: #555C67;
			text-align: center;
		}

		.cur {
			position: relative;
			font-weight: 800;
			font-size: 36rpx;
			color: #2C2622;
		}

		.nav .cu-item.cur {
			border: 0;
		}

		.act_line {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 36rpx;
			height: 6rpx;
			background: #FE6100;
			border-radius: 3rpx 3rpx 3rpx 3rpx;
		}
	}
</style>